'use client';

import { useMemo } from 'react';
import { lora, lato } from '@/components/fonts';
import Button from '@mui/material/Button';
import { styled } from '@mui/material/styles';
import { green } from '@mui/material/colors';
import MainSection from '@/components/MainSection';

const ColorButton = styled(Button)(({ theme }) => ({
  color: theme.palette.getContrastText(green['600']),
  backgroundColor: '#0687FF',
  fontWeight: 'bold',
  padding: '6px 30px',
  borderRadius: '30px',
}));

export default function screenMain() {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const dataList = useMemo(
    () => [
      {
        title: 'TMS',
        subtitle: 'Matrixfactors Logistics & Supply Chain Management',
        description: `Matrixfactors Logistics & Supply Chain Management solution is designed to 
        optimize the flow of goods, materials, and data across the entire supply chain.`,
        cover: 'bg-[url(/p1@2x.png)]',
        asideList: [
          {
            icon: '',
            groupName: '',
            title: 'Supply Optimization',
            subtitle: '',
            description: `Matrixfactors Logistics & Supply Chain Management 
            solution is designed to optimize the flow of goods, 
            materials, and data across the entire supply chain. 
            With features like real-time tracking, automation-driven demand forecasting, 
            and intelligent inventory management, businesses gain greater visibility,
             reduced costs, and improved delivery accuracy.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Seamless Coordination',
            subtitle: '',
            description: `The solution enables smooth collaboration between suppliers, 
            manufacturers, and distributors, ensuring materials arrive just in time (JIT) for production. 
            This coordination helps finished products reach customers faster and more efficiently, 
            supporting lean and responsive operations.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Operational Resilience',
            subtitle: '',
            description: `By leveraging automation and predictive analytics, 
            Matrixfactors helps businesses minimize disruptions, 
            streamline warehouse operations, and enhance overall supply chain resilience. 
            This empowers organizations to adapt quickly in a dynamic market environment while maintaining high service levels.`,
          },
        ],
      },
      {
        title: 'MES',
        subtitle: 'Matrixfactors Manufacturing Execution System',
        description: `MES ensures that production processes run smoothly by integrating real time shop floor tracking, 
        workflow automation, and data analytics.`,
        cover: 'bg-[url(/p3@2x.png)]',
        asideList: [
          {
            icon: '',
            groupName: '',
            title: 'Production Visibility',
            subtitle: '',
            description: `Matrixfactors Manufacturing Execution System (MES) transforms factory operations by providing real-time production monitoring, 
            automated quality control, and predictive maintenance. B
            y integrating real-time shop floor tracking, 
            workflow automation, and data analytics, 
            MES ensures that production processes run smoothly and efficiently.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Performance Insights',
            subtitle: '',
            description: `Manufacturers gain full visibility into work-in-progress (WIP), 
            machine performance, and product quality. 
            This results in higher operational efficiency, 
            reduced downtime, and more consistent output across production lines.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Integrated Manufacturing',
            subtitle: '',
            description: `When MES is connected with Logistics & Supply Chain Management, 
            it creates a unified ecosystem where supply and production operate in perfect sync. 
            This integration enables just-in-time (JIT) manufacturing, minimizes waste, 
            accelerates time-to-market, and supports a smarter, data-driven approach to modern manufacturing challenges.`,
          },
        ],
      },
      {
        title: 'WMS',
        subtitle: 'Matrixfactors Warehouse Management System',
        description: `Matrixfactors WMS supports end-to-end warehouse operations with full traceability. It intelligently manages warehouse space by tracking item locations, bin usage, and storage zones.`,
        cover: 'bg-[url(/warehouse.png)]',
        asideList: [
          {
            icon: '',
            groupName: '',
            title: 'Inventory Control',
            subtitle: '',
            description: `Matrixfactors Warehouse Management System (WMS) delivers real-time visibility into inventory levels, enabling businesses to accurately track stock, reduce shortages, and optimize reordering. Automated spare parts management ensures critical components are available when needed, minimizing downtime and improving maintenance efficiency.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Location Management',
            subtitle: '',
            description: `Our system intelligently manages warehouse space by tracking item locations, bin usage, and storage zones. It supports efficient putaway, picking, and replenishment processes, improving both speed and accuracy. This structured location control helps reduce travel time and enhances warehouse throughput.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Operational Integration',
            subtitle: '',
            description: `From inbound receiving to outbound shipping, Matrixfactors WMS supports end-to-end warehouse operations with full traceability. When integrated with supply chain and logistics platforms, it provides a connected, data-driven environment that improves responsiveness, reduces costs, and supports scalable growth.`,
          },
        ],
      },
      {
        title: 'Invoice',
        subtitle: 'New Invoice Module',
        description: `Designed for logistics and manufacturing environments, the module automates invoice generation 
        based on shipment data, delivery milestones, and contract terms.`,
        cover: 'bg-[url(/p2@2x.png)]',
        asideList: [
          {
            icon: '',
            groupName: '',
            title: 'Invoice Management',
            subtitle: '',
            description: `Our new Invoice Module provides an end-to-end solution for managing the full invoicing lifecycle within a single, intuitive platform. 
            Purpose-built for logistics and manufacturing operations, it simplifies invoice handling by integrating seamlessly with existing shipment and delivery workflows.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Smart Automation',
            subtitle: '',
            description: `The module enables automated invoice generation based on real-time shipment events, delivery milestones, or contract terms. Users can apply customizable invoice templates tailored to customer-specific formats or regulatory standards, ensuring both flexibility and compliance.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Operational Visibility',
            subtitle: '',
            description: `With built-in features like real-time status tracking, dispute resolution tools, and a complete audit trail, the Invoice Module improves transparency across finance and operations. It also supports bulk processing, making it ideal for high-volume billing environments where speed and accuracy are critical.`,
          },
        ],
      },

      {
        title: 'ASN',
        subtitle: 'Real-time ASN',
        description: `Our system offers a robust and intelligent framework for managing Advance Shipping Notices (ASNs), ensuring accurate, timely, and efficient downstream logistics operations.
`,
        cover: 'bg-[url(/asn.png)]',
        asideList: [
          {
            icon: '',
            groupName: '',
            title: 'ASN Management',
            subtitle: '',
            description: `Our system provides a robust and intelligent framework for managing Advance Shipping Notices (ASNs), supporting accurate, timely, and streamlined logistics operations. It handles the receipt, parsing, and validation of ASN data—typically in Excel format—from suppliers or upstream systems.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Validation Workflow',
            subtitle: '',
            description: `The platform enables real-time ASN matching against purchase orders, shipment plans, or production schedules. It performs field-level validation for data completeness, formatting, and acceptable value ranges, along with cross-referencing checks to catch discrepancies in quantities, item numbers, and delivery dates. Audit logs and history tracking ensure full traceability and compliance.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Operational Efficiency',
            subtitle: '',
            description: `Validated ASN data powers one-click dynamic packing list generation, customizable to customer, regional, or regulatory formats. The system also allows digital sharing with warehouse and logistics partners. This end-to-end approach enhances visibility, reduces shipping delays, and increases supply chain accuracy.`,
          },
        ],
      },
      {
        title: 'ERP',
        subtitle: 'Enterprise Resource Planning',
        description: `We can provide a centralized platform for various departments, including finance, supply chain management, and manufacturing, to streamline operations, improve communication, and make informed decisions. `,
        cover: 'bg-[url(/erp.png)]',
        asideList: [
          {
            icon: '',
            groupName: '',
            title: 'Seamless Integration',
            subtitle: '',
            description: `The module is built with seamless ERP connectivity in mind, enabling direct synchronization with major sales and financial systems. Through secure API connections, the integration allows efficient and real-time data exchange between operations and finance.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Automated Workflows',
            subtitle: '',
            description: `Key features include two-way data transfer for invoice records, payment statuses, and ledger updates. Approved invoices are automatically posted to the finance system’s Accounts Payable or Receivable, with real-time validation ensuring accounting consistency and data integrity.
`,
          },
          {
            icon: '',
            groupName: '',
            title: 'Sales and Finance Alignment',
            subtitle: '',
            description: `By reducing manual entry, the integration minimizes errors and boosts sales and finance team productivity. This alignment creates a single source of truth across operational and financial systems, supporting faster financial close cycles and improved audit readiness.`,
          },
        ],
      },
    ],
    []
  );

  return (
    <div>
      <div
        id={'products'}
        className={'flex flex-col items-center justify-center pt-15 pb-10'}
      >
        <h1
          className={`${lato.className} text-[34px] font-medium text-[#222] uppercase`}
        >
          Matrixfactors Products
        </h1>
        <p className={`font-sans text-[18px] font-light text-[#2f2f2f]`}>
          We provide end-to-end services to oversee the entire collaboration
          process
        </p>
      </div>

      {dataList.map(
        ({ title, subtitle, cover, description, asideList }, index) => {
          const isFirst = index === 0;
          const isLast = index === dataList.length - 1;
          const rtl = (index + 1) % 2 === 0;
          return (
            <MainSection
              key={index}
              isFirst={isFirst}
              isLast={isLast}
              rtl={rtl}
              title={title}
              subtitle={subtitle}
              description={description}
              cover={cover}
              asideList={asideList}
            />
          );
        }
      )}
    </div>
  );
}
